<template>
	<view class="travel-item">
		<view class="header">
			<view class="headerTag">
				<image src="../../common/images/car.png" class="image" mode="aspectFill"></image>
				<text class="value driver" v-if="!item.publishType">车找人</text>
				<text class="value passenger" v-if="item.publishType">人找车</text>
			</view>
			<button class="button" @click="onClickContact">联系</button>
		</view>
		<view class="content">
			<view class="row">
				<image src="../../common/images/position_1.png" class="pic" mode="aspectFill"></image>
				<view class="lable-location">起点：</view>
				<text class="value">{{item.startLc}}</text>
			</view>
			<view class="row">
				<image src="../../common/images/position_2.png" class="pic" mode="aspectFill"></image>
				<view class="lable-location">终点：</view>
				<text class="value">{{item.endLc}}</text>
			</view>
			<view class="row">
				<image src="../../common/images/clock.png" class="pic" mode="aspectFill"></image>
				<view class="lable-time">时间：</view>
				<view class="value start-end">
					<uni-dateformat :date="item.earliestTs" format="hh:mm"></uni-dateformat>
					<view class="interval">~</view>
					<uni-dateformat :date="item.lastestTs" format="hh:mm"></uni-dateformat>
				</view>
			</view>
			<view class="row">
				<view class="laber-passby" v-if="!item.publishType">途径点：</view>
				<view class="laber-passby" v-if="item.publishType">可上车点：</view>
				<view class="r-box">
					<view class="tabs" v-for="passByItem in passByTags" :key="passByItem.value">
						<view class="tab">{{passByItem.text}}</view>
					</view>
				</view>
			</view>
			
			<view class="row publisher">
				<image src="../../common/images/publisher.png" class="pic" mode="aspectFill"></image>					
				<view class="lable-publisher">发布人：</view>
				<view class="value">张先生</view>
			</view>
			
		</view>
		<uni-popup ref="contactPopup" type="bottom">
			<view class="contactPopup">	
				<view class="popHeader">
					<view class=""></view>
					<view class="title">联系对方</view>
					<view class="close" @click="clickContactClose">
						<uni-icons type="closeempty" size="18" color="#999"></uni-icons>
					</view>
				</view>
				<scroll-view scroll-y>
					<view class="content">
						<view class="copyRight">
							温馨提醒：<br>
							·每天每位用户仅能获取4位发布者的联系方式<br>
							·根据对方手机号添加ta的微信，私聊确认行程<br>
						</view>
					</view>
					<view class="footer">
						<button @click="submitButton"						 
						 type="default" size="mini" plain>获取联系电话</button>
					</view>
				</scroll-view>		
			</view>			
		</uni-popup>
			
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import {DriverTags, PassengeTags, ReferPrice} from "@/common/js/common-const.js"
const isDriver = ref(true)

const contactPopup = ref(null)



const props = defineProps({
	isMore:{
		type:Boolean,
		default:false
	},
	item:{
		type:Object,
		default(){
			return{
				uid: "",						// 用户Id
				publishType: 0,					// 发布类型
				tripType: 0,					// 发布类型：
				startLc: "",					// 起点
				endLc: "",						// 终点
				timeRange:0,					//行程时间
				passBys:[],						// 发途经点
				quotation:0,					// 报价
				sendMsgs:[]						//发布者的行程要求
				
			}
		}
	}

})
// 数据初始化
// const { travelItem } = toRefs(props);
const initData = function(){
	initTripPassbys();
}

// todo
const submitButton = function(){
	console.log("点击了按钮");
	uni.showToast({
		title:"评分成功",
		icon:"none"
	})
}

// 点击联系按钮，获取对方发布信息
const onClickContact = function(){
	contactPopup.value.open();
}

// 点击x按钮，关闭联系浮层
const clickContactClose = function(){
	contactPopup.value.close();
}

// 车找人——途经点
const passByTags = ref([])
const initTripPassbys = function(){
	if(props.item.publishType !== 0 || props.item.passBys.length === 0){
		return;
	}
	passByTags.value = getTagTexts(PassByTags, props.item.passBys);
}

// 获取对应的 text 信息
const getTagTexts = (tags, selectedValues) => {
	return tags.filter(tag => selectedValues.includes(tag.value));
};

// 确保在组件挂载后才调用 initData
onMounted(() => {
	initData();
});

</script>

<style lang="scss" scoped>
.travel-item{
	background: #fff;
	padding: 30rpx;
	border-radius: 30rpx ;
	overflow: hidden;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
	position: relative;		
	.header{
		padding: 0 15rpx;
		display: flex;
		justify-content: space-between;
		padding-left: 1rpx;
		.headerTag{	
			display: flex;
			gap: 10px; /* 文字与图标的间距 */
			.image {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 20px; /* 图标的宽度 */
				height: 20px; /* 图标的高度 */
				border-radius: 50%; /* 使图标显示为圆形 */
				object-fit: cover; /* 确保图片填充整个圆形区域 */
			}
			.value{
				display: flex;
				align-items: center;
				justify-content: center;
				color: $brand-theme-color;
				font-size: 16px;
			}
			.passenger{
				display: flex;
				align-items: center;
				justify-content: center;
				color: #8A2BE2;
				font-size: 16px;
			}
		  
		}
			
		.contact{
			width: 100rpx;
			background: #40A8C4;
			border: 0rpx solid blue;
			border-radius: 10rpx;
			display: flex;
			align-items: center; /* 垂直居中 */
		    justify-content: center; /* 水平居中 */
			.value{					
				color: #fff;
				font-size: 25rpx;
			}			
		}
	}
	.button {
		position: absolute;
		right: 10rpx;
		top: 10rpx;
		z-index: 100;
	    cursor: pointer;
	    width: 50px;
	    height: 20px;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    gap: 1rem;
	    font-size: 0.7em;
	    font-weight: 900;
	    letter-spacing: 2px;
	    color: #fff;
	    background: #40A8C4;
	    border: 2px solid #40A8C4;
	    border-radius: 0.75rem;
	    box-shadow: 0 4px 0 #00788C;
	    transform: skew(-10deg);
	    transition: all 0.1s ease;
	    filter: drop-shadow(0 15px 20px #40A8C4);
		white-space: nowrap;  // 防止内容换行	
		z-index: 0;
	  }						 
	  .button:active {
	    letter-spacing: 0px;
	    transform: skew(-10deg) translateY(8px);
	    box-shadow: 0 0 0 #00788C;
	  }
	
	.content{			
		.row{
			display: flex;
			// padding: 16rpx 0;
			font-size: 32rpx;
			height: 60rpx;
			line-height: 1.6em;
			align-items: center;
			.pic{
				width: 35rpx;
				height: 35rpx;
				padding: 10rpx 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: -10rpx; /* 向左移动 5rpx */
				
			}
			.lable-location {
				color: $text-font-color-3;
				width: 80rpx;
				text-align: left;		// 右对齐
				font-size: 30rpx;
				margin-left: 13rpx; /* 向左移动 5rpx */
				white-space: nowrap;  // 防止内容换行
			}
			.value{
				color: $text-font-color-2;
				flex: 1;
				width: 0;
				max-width: 500rpx;
				white-space: nowrap;  // 防止内容换行
				overflow: hidden;
				text-overflow: ellipsis;
				font-size: 25rpx;
				padding-left: 10rpx;
			}
			.lable-time{
				color: $text-font-color-3;
				width: 80rpx;
				font-size: 30rpx;
				text-align: right;		// 右对齐
				margin-left: 13rpx;
				white-space: nowrap;  // 防止内容换行
			}
			.start-end{
				display: flex;
				.interval{
					padding: 0 10rpx 0 10rpx;
				}
			}
			.lable-publisher{
				color: $text-font-color-3;
				width: 100rpx;
				font-size: 28rpx;
				text-align: right;		// 右对齐
				white-space: nowrap;  // 防止内容换行
				
			}
			.laber-passby{
				color: $text-font-color-3;
				width: 120rpx;
				font-size: 28rpx;
				text-align: right;		// 右对齐
				white-space: nowrap;  // 防止内容换行
				padding-left: 25rpx;
			}
			// .tabs{
			// 	// display: flex;
			// 	// padding-left: 20rpx;
			// 	// flex-wrap: wrap; 	// 自动换行
			// 	.tab{
			// 		// border: 1px solid $brand-theme-color;
			// 		// color: $brand-theme-color;
			// 		// font-size: 22rpx;
			// 		// padding: 8rpx 10rpx;
			// 		// border-radius: 40rpx;
			// 		// line-height: 1em;
			// 		// display: flex;
			// 		// align-items: center;
			// 		// justify-content: center;
			// 	}
			// }
			.r-box {
				display: flex;
				overflow: hidden;
				gap: 2px;
				.tabs {
					justify-self: center;
					align-items: center;
					.tab {
						border: 1px solid $brand-theme-color;
						color: $brand-theme-color;
						font-size: 22rpx;
						border-radius: 10rpx;
						text-align: center;
						padding: 8rpx 10rpx;
						line-height: 1em;
					}
				}
			}
		}
	}	
}
.popHeader{
	display: flex;
	justify-content: space-between;
	align-items: center;
	.title{
		color: $text-font-color-1;
		font-size: 40rpx;
		font-weight: 400;
	}
	.close{
		padding: 6rpx;
	}
}


.contactPopup{
	background:
	linear-gradient(to bottom, transparent, #fff 400rpx),
	linear-gradient(to right, #A8DADC 40%, #FADADD);
	padding: 30rpx;
	border-radius: 30rpx 30rpx 0 0;
	overflow: hidden;
	scroll-view{
		max-height: 60vh;
		padding-bottom: 100rpx;
		.content{
			.copyRight{
				font-size: 28rpx;
				padding: 20rpx;
				background: #f6f6f6;
				color:  $text-font-color-2;
				border-radius: 20rpx 0;
				margin: 20rpx 0;
				line-height: 1.6em;
			}	
		}
		.footer{
			width: 70vm;
			padding: 10rpx 0;
			display: flex;
			align-items: center;
			justify-content: center;
			button{
				background: $brand-theme-color;
				border: none;
				font-size: 20px; /* 设置字体大小 */
				transition: transform 0.1s ease, box-shadow 0.1s ease; /* 添加过渡效果 */
			}
			button:active {
			    transform: scale(0.85); /* 按下时缩小 */
			    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
			}
		}
		
	}
}
</style>